How to remove quick view in products category thumbnails for prestashop 1.7 - themes

How to remove quick view from product thumbnails in the category section of a prestashop 1.7.

Remove this code from templatename/templates/catalog/_partials/miniatures/product.tpl
<div class="highlighted-informations{if !$product.main_variants} no-variants{/if} hidden-sm-down">
{block name='quick_view'}
<a class="quick-view" href="#" data-link-action="quickview">
<i class="material-icons search"></i> {l s='Quick view' d='Shop.Theme.Actions'}
</a>
{/block}
{block name='product_variants'}
{if $product.main_variants}
{include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants}
{/if}
{/block}
</div>

Related

Smarty templating get second last element

Our designer wants to show only the parent of the last item in the breadcrumb. So if you are in My account > Addresses > Add new address, the breadcrumb should only show:
< Addresses
I'm not particularly known with Smarty, can this be done in some way?
This is the breadcrumb code I am working with at the moment:
<nav data-depth="{$breadcrumb.count}" class="breadcrumb">
<ul class="list-group list-group-flush list-group-horizontal m-0 p-0 d-flex">
{block name='breadcrumb'}
{foreach from=$breadcrumb.links item=path name=breadcrumb}
{block name='breadcrumb_item'}
<li class="list-group-item border-0">
<img src="{$urls.img_url}/icons/icon-back-account-arrow.svg" class="icon-svg" alt=""/>
<a href="{$path.url}" class="ms-2">
{$path.title}
</a>
</li>
{/block}
{/foreach}
{/block}
</ul>
</nav>
I am thinking of assigning a var to the last item and only showing that but I'm not sure how to go about it. Maybe something like:
{assign var=toShow value=($breadcrumb.count - 1)}
But I'm not sure how to use that in the loop.. Can someone help me in the right direction?

How to use include in smarty3 template engine

This is my first template for Prestashop 1.7. I use Starter theme. But now I have problem because I want to create new block.
addresses.tpl
{extends file='page.tpl'}
{block name='page_content_container'}
<div class="container">
<div class="account">
<h2 class="heading">
{block name='page_title'}
{l s='Your addresses' d='Shop.Theme.Customeraccount'}
{/block}
</h2>
<div class="box">
<section id="content" class="page-content page-addresses">
{foreach $customer.addresses as $address}
{block name='customer_address'}
{include file='customer/_partials/block-address.tpl' address=$address}
{/block}
{/foreach}
<footer>
<a href="{$urls.pages.address}" data-link-action="add-address">
{l s='Create new address' d='Shop.Theme.Actions'}
</a>
</footer>
</section>
</div>
</div>
</div>
{/block}
and page.tpl
{extends file='page.tpl'}
{block name='my_account_links'}
{include file='customer/_partials/my-account-links.tpl'}
{/block}
This file extend another page.tpl but there is no my_account_links block. the question is. Why I dont see my_account_links block in addresses.tpl. When I display the page.
Kind regards
You don't see your my_account_links block in addresses.tpl because you don't have any {block name='my_account_links'} in addresses.tpl.
If you want to display your page.tpl in your addresses.tpl, you have to "call" the block in your parent file and extends it in your child file ( page.tpl ). Like this :
Addresses.tpl
{block name='my_account_links'} <!-- YOUR my_account_links OF YOUR PAGE.TPL WILL BE HERE {/block}
{block name='page_content_container'}
<div class="container">
<div class="account">
<h2 class="heading">
{block name='page_title'}
{l s='Your addresses' d='Shop.Theme.Customeraccount'}
{/block}
</h2>
<div class="box">
<section id="content" class="page-content page-addresses">
{foreach $customer.addresses as $address}
{block name='customer_address'}
{include file='customer/_partials/block-address.tpl' address=$address}
{/block}
{/foreach}
<footer>
<a href="{$urls.pages.address}" data-link-action="add-address">
{l s='Create new address' d='Shop.Theme.Actions'}
</a>
</footer>
</section>
</div>
</div>
</div>
{/block}
And in your page.tpl :
{extends file='addresses.tpl'}
{block name='my_account_links'}
{include file='customer/_partials/my-account-links.tpl'}
{/block}
Now, with this, your page.tpl ( the block 'my_account_links' ) will be display in your addresses.tpl

Display products of specific category on homepage stencil theme

How to display limited products of specific category on homepage bigcommerce with stencil theme? i want to show some categories like. u can see in my code below:
<main class="page-content">
<h2 class="page-heading">T-Shirts On Sale</h2>
<span class="viewall">View More</span>
<ul class="productGrid productGrid--maxCol3" data-product-type="t-shirts-on-sale">
{{#each products}}
<li class="product">
{{>components/products/card theme_settings=../theme_settings}}
</li>
{{/each}}
</ul>
<h2 class="page-heading">Hoodies On Sale</h2>
<span class="viewall">View More</span>
<ul class="productGrid productGrid--maxCol3" data-product-type="hoodies-on-sale">
{{#each products}}
<li class="product">
{{>components/products/card theme_settings=../theme_settings}}
</li>
{{/each}}
</ul>
<h2 class="page-heading">Polos Shirts On Sale</h2>
<span class="viewall">View More</span>
<ul class="productGrid productGrid--maxCol3" data-product-type="polos-shirts-on-sale">
{{#each products}}
<li class="product">
{{>components/products/card theme_settings=../theme_settings}}
</li>
{{/each}}
</ul>
</main>
There isn't a way to fetch products from a specific category with existing handlebars helpers. You could inject context to a page with product IDs and use that to create product cards such as:
An example of injecting IDs to the category page (not the home page as you specified)
In assets/js/theme/category.js, this add the following:
constructor(context) {
super();
console.log(context.productIds);
}
And in templates/pages/category.html, add:
{{inject "productIds" (pluck category.products 'id')}}
For the home page, you will need to make changes to assets/js/theme/home.js instead of category or use the API and a separate server (not the utils API, but the API documented at bigcommerce.developer.com) to make a call to a category and provide IDs/product info.

how can i magento remove v:Breadcrumb - format error

For some reason, breadcrumbs is formatted all wrong - arrows over text and the start of breadcrumbs is way over to the left and not in-line with the template
Problem Code:
<ul>
<li class="home">
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" title="Go to Home Page" href="your-url/">Home</a>
»
</span>
</li>
<li class="category96">
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" title="" href="your-url">Accessories</a>
»
</span>
</li>
<li class="category6">
<span typeof="v:Breadcrumb">
<strong>Scope</strong>
</span>
</li>
Using Firebug i found that if i make these changes, then it is displayed exactly as i required:
<ul>
<li class="home">
<a property="v:title" rel="v:url" title="Go to Home Page" href="your- url/">Home</a>
»
</li>
<li class="category96">
<a property="v:title" rel="v:url" title="" href="your-url">Accessories</a>
»
</span>
</li>
<li class="category6">
<strong>Scope</strong>
</li>
PROBLEM
Where do i make these changes in the file structure of magento?
could be a school boy error but has been driving me mad all day
any help much appreciated
Breadcrumb content are rendered from the following file
app\design\frontend\<your_package>\<your_theme>\template\page\html\ breadcrumbs.phtml
If the file is not present in your theme. Get the copy of the file from base/default or rwd/default theme.
Then paste it in your theme with above file path.

Breadcrumbs microdata not appearing in structured data preview tool

I'm trying microdata for breadcrumbs on a development site, and I've followed Google's own example, but for some reason the actual breadcrumb doesn't preview in the Structured Data Testing Tool
This is how my code looks like:
<div class="back" xmlns:v="http://rdf.data-vocabulary.org/#">
<h3>
<span itemprop="breadcrumb" typeof="v:Breadcrumb">
Steaks And Game
</span> ::
<span itemprop="breadcrumb" typeof="v:Breadcrumb">
Wagyu Steaks
</span> ::
<span itemprop="breadcrumb" typeof="v:Breadcrumb">Tenderloin - Filet Mignon
</span>
</h3>
<div class="clear"></div>
</div>
And this is what the Structure Data Tool is showing me:
It's showing URL under the title instead of the breadcrumb links.
This is an example showing the breadcrumb links:
The test page is here
And the preview of the page using the Structured data tool is here
site is built using Asp.Net
I've tried a number of things like:
Using the › sign instead of ::
I've even copy pasted Google's own example code for microdata breadcrumb implementations:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</div>
I've copy pasted the entire source code of the page on another page on a linux server and amazingly that validates correctly. I really don't know what to do further. Any advice would be appreciated.
I found a way to use the current Schema.org markup for valid breadcrumbs. It is important to not just append the breadcrumb links one by one, but to nest them and give all but the first one the 'child' itemprop.
<p id="breadcrumbs">
<span itemprop="breadcrumb" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Dresses</span>
»
<span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Real Dresses</span>
»
<span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Real Green Dresses</span>
</span>
</span>
</span>
</p>
This is exactly how it works with Data-Vocabulary.org, it just uses the more current Schema.org markup instead. This will tell the search engines how your breadcrumbs are connected.
Use This SCHEMA strcture
**
Use this for Microdata for breadcrumber
**
<div class="breadcrumbs">
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home" >
<a href="index.html" title="Go to Home Page" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span>></span>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
<a href="product.html" title="Product" itemprop="url">
<span itemprop="title">product name</span>
</a>
<span>></span>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
<a href=".finalproduct.html" title="final product" itemprop="url">
<span itemprop="title">final product</span>
</a>
<span>></span>
</li>
<li class="category6"><strong>Final Product view</strong></li>
</ul>
</div>
**
Important: It also used for SEO Purpose
**
enter link description here

Resources