Bitime adım adım 9 adet farklı görünüm eklendi. Ve ayarları yapıldı son testlerden sonra makalesi hazırlanacaktır. 2. Fragman videosu aşağıdadır. https://www.youtube.com/watch?v=gKCgiJfkp4Y Opencart 2.3. x Product Layout New Interface 9 More Example Setup Dosyamızı Açalım : catalog/view/theme/default/stylesheet stylesheet. css En Alt Satıra Ekeyelim: / shopping Demo-1 / . product-grid . product-grid. product-image . product-grid. product-image a . product-grid. product-image img . product-grid. pic-1 . product-grid:hover. pic-1 . product-grid. pic-2 . product-grid:hover. pic-2 . product-grid. social . product-grid:hover. social . product-grid. social li . product-grid. social li a . product-grid. social li a:hover . product-grid. social li a:after,. product-grid. social li a:before . product-grid. social li a:after . product-grid. social li a:hover:after,. product-grid. social li a:hover:before . product-grid. product-discount-label,. product-grid. product-new-label . product-grid. product-discount-label . product-grid. rating . product-grid. rating li. disable . product-grid. product-content . product-grid:hover. product-content . product-grid. title . product-grid. title a . product-grid. title a:hover,. product-grid:hover. title a . product-grid. price . product-grid. price span . product-grid. add-to-cart @media only screen and (max-width:990px){. product-grid } / Shopping Demo-2 / . demo . product-grid2 . product-grid2. product-image2 . product-grid2. product-image2 a . product-grid2. product-image2 img . product-image2. pic-1 . product-grid2:hover. product-image2. pic-1 . product-image2. pic-2 . product-grid2:hover. product-image2. pic-2 . product-grid2. social . product-grid2. social li . product-grid2:hover. social li . product-grid2:hover. social li:nth-child(2) . product-grid2:hover. social li:nth-child(3) . product-grid2. social li a . product-grid2. social li a:hover . product-grid2. social li a:after,. product-grid2. social li a:before . product-grid2. social li a:after . product-grid2. social li a:hover:after,. product-grid2. social li a:hover:before . product-grid2. add-to-cart . product-grid2. add-to-cart:hover . product-grid2:hover. add-to-cart . product-grid2. product-new-label . product-grid2:hover. product-new-label . product-grid2. product-content . product-grid2. title . product-grid2. title a . product-grid2. title a:hover . product-grid2. price @media screen and (max-width:990px){. product-grid2 } / Shopping Demo-3 / . product-grid3 . product-grid3:before . product-grid3:hover:before . product-grid3. product-image3 . product-grid3. product-image3 a . product-grid3. product-image3 img . product-grid3. pic-1 . product-grid3:hover. pic-1 . product-grid3. pic-2 . product-grid3:hover. pic-2 . product-grid3. social . product-grid3:hover. social . product-grid3:hover. product-discount-label,. product-grid3:hover. product-new-label,. product-grid3:hover. title . product-grid3. social li . product-grid3. social li a . product-grid3. social li a:hover . product-grid3. product-discount-label,. product-grid3. product-new-label . product-grid3. product-content . product-grid3. title . product-grid3. title a . product-grid3. price . product-grid3. price span . product-grid3. rating . product-grid3. rating li . product-grid3. rating li. disable @media only screen and (max-width:1200px){. product-grid3. rating } @media only screen and (max-width:990px){. product-grid3 . product-grid3. rating } @media only screen and (max-width:359px){. product-grid3. rating } / Shopping Demo-4 / . product-grid4,. product-grid4. product-image4 . product-grid4 . product-grid4:hover . product-grid4. product-image4 a . product-grid4. product-image4 img . product-grid4. pic-1 . product-grid4:hover. pic-1 . product-grid4. pic-2 . product-grid4:hover. pic-2 . product-grid4. social . product-grid4. social li . product-grid4. social li:nth-child(1) . product-grid4. social li:nth-child(2) . product-grid4. social li:nth-child(3) . product-grid4:hover. social li . product-grid4. social li a . product-grid4. social li a:hover . product-grid4. social li a:after,. product-grid4. social li a:before . product-grid4. social li a:after . product-grid4. social li a:hover:after,. product-grid4. social li a:hover:before . product-grid4. product-discount-label,. product-grid4. product-new-label . product-grid4. product-discount-label . product-grid4:hover. product-new-label . product-grid4. product-content . product-grid4. title . product-grid4. title a . product-grid4. title a:hover . product-grid4. price . product-grid4. price span . product-grid4. add-to-cart . product-grid4:hover. add-to-cart . product-grid4. add-to-cart:hover @media only screen and (max-width:990px){. product-grid4 } / Shopping Demo-5 / . product-image5. pic-1,. product-image5. pic-2 . product-grid5 . product-grid5. product-image5 . product-grid5. product-image5 a . product-grid5. product-image5 img . product-image5. pic-1 . product-grid5:hover. product-image5. pic-1 . product-image5. pic-2 . product-grid5:hover. product-image5. pic-2 . product-grid5. social . product-grid5. social li . product-grid5. social li:nth-child(2) . product-grid5:hover. social li:nth-child(2) . product-grid5. social li:nth-child(3) . product-grid5:hover. social li:nth-child(3) . product-grid5. social li a . product-grid5. social li a:hover . product-grid5. select-options . product-grid5. select-options:hover . product-grid5:hover. select-options . product-grid5. product-content . product-grid5. title . product-grid5. title a . product-grid5. title a:hover . product-grid5. price @media only screen and (max-width:990px){. product-grid5 } / Shopping Demo-6 / . product-grid6,. product-grid6. product-image6 . product-grid6 . product-grid6:hover . product-grid6. product-image6 a . product-grid6. product-image6 img . product-grid6:hover. product-image6 img . product-grid6. product-content . product-grid6:hover. product-content . product-grid6. title . product-grid6. title a . product-grid6. title a:hover . product-grid6. price . product-grid6. price span . product-grid6. social . product-grid6:hover. social . product-grid6. social li . product-grid6. social li a . product-grid6. social li a:hover . product-grid6. social li a:after,. product-grid6. social li a:before . product-grid6. social li a:after . product-grid6. social li a:hover:after,. product-grid6. social li a:hover:before @media only screen and (max-width:990px){. product-grid6 } / Shopping Demo-7 / . product-grid7 . product-grid7. product-image7 . product-grid7. product-image7 a . product-grid7. product-image7 img . product-grid7. pic-1 . product-grid7. pic-2 . product-grid7:hover. pic-2 . product-grid7. social . product-grid7:hover. social . product-grid7. social li a . product-grid7. social li a:hover . product-grid7. product-new-label . product-grid7. product-content . product-grid7. title . product-grid7. title a . product-grid7. title a:hover . product-grid7. rating . product-grid7. price . product-grid7. price span @media only screen and (max-width:990px){. product-grid7 } / Shopping Demo-8 / . product-grid8 . product-grid8. product-image8 . product-grid8:hover. product-image8 . product-grid8. product-image8 a . product-grid8. product-image8 img . product-grid8. pic-1 . product-grid8:hover. pic-1 . product-grid8. pic-2 . product-grid8:hover. pic-2 . product-grid8. social . product-grid8. social li . product-grid8:hover. social li . product-grid8:hover. social li:nth-child(1) . product-grid8:hover. social li:nth-child(2) . product-grid8:hover. social li:nth-child(3) . product-grid8. social li a . product-grid8. social li a:hover . product-grid8. product-discount-label . product-grid8. product-content . product-grid8. price . product-grid8. price span . product-grid8. product-shipping . product-grid8. product-shipping:before . product-grid8. title . product-grid8. title a . product-grid8. title a:hover . product-grid8. all-deals . product-grid8. all-deals. icon . product-grid8. all-deals:hover @media only screen and (max-width:990px){. product-grid8 } / Shopping Demo-9 / . product-grid9,. product-grid9. product-image9 . product-grid9 . product-grid9. product-image9 a . product-grid9. product-image9 img . product-grid9. pic-1 . product-grid9:hover. pic-1 . product-grid9. pic-2 . product-grid9:hover. pic-2 . product-grid9. product-full-view . product-grid9. product-full-view:hover . product-grid9:hover. product-full-view . product-grid9. product-content . product-content. rating . product-grid9. rating li . product-grid9. rating li. disable . product-grid9. title . product-grid9. title a . product-grid9. title a:hover . product-grid9. price . product-grid9:hover. price . product-grid9. add-to-cart . product-grid9:hover. add-to-cart @media only screen and (max-width:990px){. product-grid9 } Dosyamızı Açalım : catlog/controller/extension/module/ featured. php Bulalım: $data = $this->language->get ; Alt Satıra Ekleyelim : $data = $this->language->get ; Bulalım : if ($this->customer->isLogged || !$this->config->get { Üst Satıra Ekleyelim : $images = $this->model_catalog_product->getProductImages ; if(isset($images ) && ! empty($images )) Bulalım : if $result ) { $special_percentage = round(100 - (($this->tax->calculate($result , $result , $this->config->get 100) / $this->tax->calculate($result , $result , $this->config->get ; Bulalım : $special = false; $special_percentage = false; Bulalım : 'thumb' => $image, Alt Satıra Ekleyelim : 'tarih' => $result , 'thumb_swap' => $this->model_tool_image->resize , 'special_percentage' => $special_percentage, Dosyamızı Açalım : catalog/view/theme/your-theme/template/extension/module bestseller. tpl, featured. tpl, latest. tpl, special. tpl Dosyaların içeriklerini aşağıdaki stillerden istediğiniz ile değişin - shopping Demo-1 Sale % --------------------------------------------------------------- - shopping Demo-2 --------------------------------------------------------------------------------------------- - shopping Demo-3 New -------------------------------------------------------------------------------------------------------------------------------- - shopping Demo-4 ------------------------------------------------------------------------------------------------------------ - shopping Demo-5 New % ----------------------------------------------------------------------------------------------------------------------- - shopping Demo-6 ------------------------------------------------------------------------------------------------------------------------ - shopping Demo-7 New ------------------------------------------------------------------------------------------------------------------------------------- - shopping Demo-8 % ---------------------------------------------------------------------------------------------------------------------------------------------------------- - shopping Demo-9 Herkese merhaba bu sefer can sıkıntısında nirvana yaptım :) . Toplamda 7 ürün görünümü tek bir modulde görünecek şekilde seçim yapabilme imknanı olan bir düzenleme planlıyorum. video aşadaki gibidir. Esinlendiğim Site : https://bootsnipp.com/snippets/O5yMd..::: Ders Videosu :::... ..::: Fragman Videosu :::...

İşteyim hocam şimdi eve geçince bakacağım videolara :) ellerinize sağlık.

Bitime adım adım 9 adet farklı görünüm eklendi. Ve ayarları yapıldı son testlerden sonra makalesi hazırlanacaktır. 2. Fragman videosu aşağıdadır.

melankoliaEleştirilerinizi bekliyorum

Guzel olmuş basarilar dilerim üst menünün basina anasayfa ikonu ekleryip menuyu birazda yuksekligininide degistirin daha iyi olur birde bitmiş halini paylaşabilirmisiniz teşekürler şimdiden

Hocam yine süper kodlarla gelmişsiniz. Canınızın sıkılmasından bu sonuçlar çıkıyoırsa müthişsiniz. Tema yapımında kesin kullanıcağım. Ellerinize sağlık. Biz sayenizde ilerliyoruz.

EchoBilisimtestini yaptım sorun ek resim olmayan üründen kaynaklı. Default temada test sorunsuz. Ekresim olmayan ürünlerinize ek resim ekleyip denermisiniz. Video renderlanıp eklenecektir.

Rica ederim ancak son cümlenizi anlamadı m

Duzenleme yapilmistir mobil kendi degistirinde ondan anlasilmayacak duruma gelmis