Octopus系列之各个页面调用示例

调用首页产品

可选参数如下

New = 1,
Hot = 2,
Best = 3,
Special = 4,
Featured = 5,
Other = 6

#foreach($item in $oct.GetProductstList(${currency},6,$ptype.Best))
                                    <dl class="indexlist">
                                        <dt class="proimg">
                                            <a href="${item.url}" title="">
                                                <img src="${item.images.smallimg}" title="" alt="" />
                                            </a>
                                        </dt>
                                        <dd class="prodName">
                                            <a href="${item.url}" title="">${item.name}</a>
                                        </dd>
                                        <dd class="prodPrice">
                                            <span class="oldPrice">${item.NormalPrice}</span>
                                            <span class="price">${item.SalePrice}</span>
                                            <span class="discount">Save:${item.Saveoff} off</span>
                                        </dd>
                                    </dl>
#end

列表页 调用面包屑导航

            <div id="breadcrumb" class="breadcrumbs">
                        <ul>
                            #foreach($item in $category.Breadcrumb)
                            #beforeall
                            <li class="home"><a title="${Oct_Home}" href="${siteurl}">${Oct_Home}</a><span>/ </span></li>
                            #each
                            <li class="">
                                <a href="${item.url}">${item.name}</a>
                                #if(${category.ClassLayer}!=1)
                                <span>/</span>
                                #end
                            </li>
                            #afterall
                            #if(${category.ClassLayer}!=1)
                            <li class="">${category.name}</li>
                            #end
                            #end
                        </ul>
                    </div>

调用全部分类【支持无限级的调用,根据需要自己编写】 下面展示4级分类的调用

                <div>
                                <dl>
                                    #foreach($item in $categorylist)
                                    <dd>
                                        <a href="${item.url}">${item.name}</a>
                                        #foreach($s in $item.SubClass)
                                        #beforeall
                                        <ul>
                                            #each
                                            <li>
                                                <a href="${s.url}">${s.name}</a>
                                                #foreach($o in $s.SubClass)
                                                #beforeall
                                                <ul>
                                                    #each
                                                    <li>
                                                        <a href="${o.url}">${o.name}</a>
                                                        #foreach($p in $o.SubClass)
                                                        #beforeall
                                                        <ul>
                                                            #each
                                                            <li><a href="${p.url}">${p.name}</a></li>
                                                            #afterall
                                                        </ul>
                                                        #end
                                                    </li>
                                                    #afterall
                                                </ul>
                                                #end
                                            </li>
                                            #afterall
                                        </ul>
                                        #nodata
                                        #end
                                    </dd>
                                    #end
                                </dl>
                            </div>

很长看不懂吗?很简单 自己运行一下

调用产品列表

                   <div id="gridInner">
                                #set($count=0)
                                #foreach($item in $productlist)
                                #set($count=$count+1)
                                <div class="plist">
                                    <div class="proimg">
                                        <a href="${item.url}" title="">
                                            <img class="proimgitem" src="${item.images.smallimg}" title="${item.name}" alt="${item.name}"  />
                                            <span class="span_box"></span>
                                        </a>
                                    </div>
                                    <div class="description">
                                        <a href="${item.url}" title="${item.name}">
                                            ${item.name}
                                        </a>
                                    </div>
                                    <div class="prodesprice">
                                        <span class="retail-price">
                                            <span class="set-currency">${item.NormalPrice}</span>
                                        </span>
                                        <span class="price">${item.SalePrice}</span>
                                        <span class="discount">Save:${item.Saveoff} off</span>
                                    </div>
                                </div>
                                #if($count%3==0)
                                <div class="clear separator"></div>
                                #end
                                #end
                                <div style="clear:both;height:5px"></div>
                                <div class="default">
                                    ${pager}
                                </div>
                            </div>

关于分页的样式,已经内置几种样式可以自己定义

调用详情页面包屑【和分页的有点细微差别】

                      <div id="breadcrumb" class="breadcrumbs">
                                        <ul>
                                            #foreach($item in ${product.category.breadcrumb})
                                            #beforeall
                                            <li class="home"><a title="${Oct_Home}" href="${siteurl}">${Oct_Home}</a><span>/</span></li>
                                            #each
                                            <li class="">
                                                <a href="${item.url}">${item.name}</a>
                                                #if(${product.category.classlayer}!=1)
                                                <span>/</span>
                                                #end
                                            </li>
                                            #afterall
                                            #if(${product.category.classlayer}!=1)
                                            <li class=""><a href="${item.url}">${product.category.name}</a></li>
                                            #end
                                            #end
                                        </ul>
                                    </div>

【通过产品的category对象来调用】

调用产品的多选属性

                              <div class="box">
                                                    #foreach($item in $product.Attributes)

                                                    #if($item.type=="attr_radio")
                                                    <div class="$item.type">
                                                        <input type="hidden" name="attr_${item.name}" value="" />
                                                        <b>$item.Name</b>
                                                        <div style="clear:both"></div>
                                                        #foreach($a in $item.values)
                                                        <span class="unchecked" title="$a.value" data-val="$a.value">
                                                            $a.value&nbsp;$oct.CheckValue($a.Pricefix)&nbsp;$a.DVPrice
                                                        </span>
                                                        #end
                                                        <div style="clear:both"></div>
                                                    </div>
                                                    #end

                                                    #if($item.type=="attr_dropdown")
                                                    <div class="$item.type">
                                                        <b>$item.Name</b>
                                                        <select name="attr_$item.Name" onchange="CheckInput(this);">
                                                            <option value="" selected="selected">${Oct_Please_Select}</option>
                                                            #foreach($a in $item.values)
                                                            <option value="$a.value">$a.value $oct.CheckValue($a.Pricefix) $a.DVPrice</option>
                                                            #end
                                                        </select>
                                                        <div style="clear:both"></div>
                                                    </div>
                                                    #end

                                                    #if($item.type=="attr_color_radio")
                                                    <div class="$item.type">
                                                        <input type="hidden" name="attr_${item.name}" value="" />
                                                        <b>$item.Name</b>
                                                        <div style="clear:both"></div>
                                                        #foreach($a in $item.values)
                                                        <span class="unchecked" data-val="$a.value">
                                                            <img src="${themeurl}images/color/$a.Icon"
                                                                 title="$a.value $oct.CheckValue($a.Pricefix) $a.DVPrice"
                                                                 width="32" />
                                                        </span>
                                                        #end
                                                        <div style="clear:both"></div>
                                                    </div>
                                                    #end

                                                    #if($item.type=="attr_text")
                                                    <div class="$item.type">
                                                        #foreach($a in $item.values)
                                                        <b>$item.Name:</b>
                                                        <input type="text" name="attr_${item.name}" value="" onchange="CheckInput(this)" />
                                                        <br />
                                                        #end
                                                        <div style="clear:both"></div>
                                                    </div>
                                                    #end

                                                    #end
                                                </div>

这个大家还是自己看吧 【懒得口舌了,想要之后可以私下联系我,如果更新了 我会在上面更新的】

其实之所以这样贴出来是为了大家方便,其实Octopus完全支持自定义的模板开发的 不过你要完全熟悉我的对象实体 才行

调用关联产品

                            <div class="box">
                                                    #foreach($rp in $product.Related)
                                                    <a href="$rp.url" title="$rp.name">
                                                        <img src="$rp.images.smallimg" width="85" style="border:1px solid #EEEEEE" />
                                                    </a>
                                                    #end
                                                </div>

调用上一个产品下一个产品

                         <div class="box" style="font-weight: bold; font-size: 14px; color: #990000;">
                                                <a class="cor990000" href="$product.PreviousUrl">&lt;&lt;&nbsp;${Oct_Prev}</a>&nbsp;&nbsp;
                                                <a class="cor990000" href="$product.category.URL">${Oct_Listing}</a>&nbsp;&nbsp;
                                                <a class="cor990000" href="$product.NextUrl">${Oct_Next}&nbsp;&gt;&gt;</a>&nbsp;&nbsp;
                                            </div>

调用收藏夹

                               #if(${islogin})
                                                    #if(${iswishlist})
                                                    <a name="btnAddToWishList" class="litb-btn-small" id="favorite" href="javascript:void(0)"
                                                       data-pid="${product.productid}"
                                                       data-login="${islogin}"
                                                       data-iswishlist="${iswishlist}"
                                                       onclick="AddToWish(this)">
                                                        <i class="litb-icon-prod-heart litb-icon-prod-heart-active"></i>
                                                        ${Oct_Favorite}
                                                    </a>
                                                    #else
                                                    <a name="btnAddToWishList" class="litb-btn-small" id="favorite" href="javascript:void(0)"
                                                       data-pid="${product.productid}"
                                                       data-login="${islogin}"
                                                       data-iswishlist="${iswishlist}"
                                                       onclick="AddToWish(this)">
                                                        <i class="litb-icon-prod-heart"></i>
                                                        ${Oct_Favorite}
                                                    </a>
                                                    #end
                                                    #else
                                                    <a name="btnAddToWishList" class="litb-btn-small" id="favorite" href="javascript:void(0)"
                                                       data-login="${islogin}" onclick="AddToWish(this)">
                                                        <i class="litb-icon-prod-heart"></i>Favorite
                                                    </a>
                                                    #end

调用产品放大镜

                          <div class="zoom-section">
                                                <div class="zoom-small-image">
                                                    <a id="zoom1" class="cloud-zoom" href="${product.images.bigimg}"
                                                       rel="position:'inside',showTitle: false,adjustX:0,adjustY:0">
                                                        <img src="${product.images.middleimg}" />
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="zoom-desc">
                                                #foreach($img in $product.images.imagelist)
                                                <a class="cloud-zoom-gallery" title="" href="$img.bigimg" rel="useZoom: 'zoom1', smallImage: '$img.middleimg' ">
                                                    <img class="zoom-tiny-image" alt="Thumbnail 0" src="$img.smallimg" />
                                                </a>
                                                #end
                                            </div>

调用随机产品

                               #foreach($item in $oct.GetRandomProductList(${currency},3))
                                                    <dl>
                                                        <dt>
                                                            <a href="$item.url" title="$item.name">
                                                                <img src="$item.images.smallimg" title="$item.name" alt="$item.name" width="189" />
                                                            </a>
                                                        </dt>
                                                        <dd class="prodName">
                                                            <a href="$item.url" title="$item.name">$item.name</a>
                                                        </dd>
                                                        <dd class="prodPrice">
                                                            <span class="oldPrice">${item.NormalPrice}</span>
                                                            <span class="price">${item.SalePrice}</span>
                                                            <span class="discount">Save:${item.Saveoff} off</span>
                                                        </dd>
                                                    </dl>
                                                    #end

调用函数

字符截取

$oct.CutString("${item.ProductID}+${item.name}",45)

$oct.CutUrl(${siteurl})

上一篇:Web调试利器OpenWindow


下一篇:Octopus系列之代码备份