Disable cart redirection on homepage?

Posted by: @adenmott

The featured collection widget on the homepage allows for shoppers to add items to the cart from the homepage without clicking to the product page. The collections pages also allows this feature. In both cases you are redirected to the shopping cart. Is there any way to disable cart redirection and make it behave the same as it does on the product page (when you click add to cart a little window pops up to confirm you added successfully)?

 

Thanks so much!

hi Aden,

It is possible to add a text (added to cart) without redirecting to the cart page.

However, unfortunately giving instructions for this feature exceed the scope of our assistance on the forum, as it requires lot of modifications on several files to make it work.

If you need this feature to be embedded in your site, you can either hire a third party developer to code it our hire us, and we will make sure to make it look and work as you desire. 

Kind regards,
Katrine

Hi Katrine, 

I am referring to the "Show notification when item is added to cart" checkbox located in the general section of the Plak settings.  When checked, it shows a popup on the product pages rather than redirecting to the cart.  Is there any way in these settings to make it so this "Show notification when item is added to cart" also works on the collections page and the featured collection widget?  I am not looking to add text, but to have the notification feature be universal on the entire website.

Thanks again!

Posted by: @adenmott

Hi Katrine, 

I am referring to the "Show notification when item is added to cart" checkbox located in the general section of the Plak settings.  When checked, it shows a popup on the product pages rather than redirecting to the cart.  Is there any way in these settings to make it so this "Show notification when item is added to cart" also works on the collections page and the featured collection widget?  I am not looking to add text, but to have the notification feature be universal on the entire website.

 

Thanks again!

I understand what you are referring to Aden, the cart popup doesn't exist in collection or homepage on Plak for now, and implementing it ain't easy as it appears and requires lot of modification within the theme files.

I added this to our to do list to make an option on our next release 🙂

Thank you Katrine!  Is it possible to at least be able to disable the secondary images so when you hover over them you don't see a second photo and that the main image stays there?

Posted by: @adenmott

Thank you Katrine!  Is it possible to at least be able to disable the secondary images so when you hover over them you don't see a second photo and that the main image stays there?

Yes of course,

here are the steps to remove the secondary hover image

• Online store > Actions > Edit code
• Open the file product-card-grid.liquid
• Replace the entire code with this one

<style>
.tooltiptext.add-to-wishlist{
top:50px!important
}
.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{
position:relative!important;
top:0!important;
transform:translateX(0)!important;
padding-top:8px;
padding-bottom:8px
}
.product-hover-icon-container .add-to-wishlist{
margin-left:5px
}
.product-card .tooltipp.anim-hover{
overflow:hidden
}
.product-hover-icon-container{
transform:translateY(50px);
visibility:hidden;transition:all .4s ease}
.tooltipp.anim-hover:hover .product-hover-icon-container{
transform:translateY(0);visibility:visible}@media only screen and (min-width:750px){.product-hover-icon-container{position:absolute;bottom:0;left:0;display:flex;align-items:center;height:45px;width:100%;background:rgba(0,0,0,.4);justify-content:center}}@media only screen and (max-width:950px){.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{font-size:10px}}@media only screen and (max-width:800px){.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{font-size:9px}}@media only screen and (max-width:750px){.tooltipp .add-to-wishlist{display:none}}@media screen and (min-width:767px){.tooltipp{position: relative;display: inline-block;}.tooltipp .tooltiptext{visibility: none;width: auto;text-align: center;border-radius: 6px;padding: 5px;position: absolute;z-index: 1;top: 10px;}.tooltipp .tooltiptext{display:none;}.tooltipp .tooltip-addtocart{display: none;}.tooltipp:hover .tooltip-addtocart{display: inline-block;}.tooltipp:hover .tooltiptext{display:inline-block;}}

.quick-view-button{transition:.3s!important}.quick-view-button:hover{transform:translateX(7px)}

.anim-hover img{transition:1.4s;opacity : 1;}
.anim-hover:hover img{opacity: 0.8;}.icn {position: absolute;top: 2px;width: 50px;height: 50px;border-radius: 50%;right: 28px;text-align: center;padding: 0 10px;line-height: 52px;font-size : 15px;@media only screen and (max-width: 749px) {width: 40px;height: 40px; font-size : 10px;line-height: 40px;}}.new{z-index: 2;background: {{settings.newp-bkclr}};color: {{settings.newp-clr}};}.days-ago{top: 0px;width: 45px;height: 45px;font-size: 13px;padding: 3px;border-radius: 50%;background: {{settings.newp-bkclr}};line-height: 12px;color: {{settings.newp-clr}};overflow: hidden;text-align: center;right: 0px;@media only screen and (max-width: 749px) {width:30px;height:30px;font-size : 9px;line-height: 9px;}}.sale{right: 20px;z-index: 2;background: {{settings.salep-bk}};color: {{settings.salep-txt}};}.product-card .tooltipp{width: 100%;}.product-card .tooltipp img{width: 100%;}</style>
{% unless grid_image_width %}
{%- assign grid_image_width = '275x275' -%}
{% endunless %}
<div class=" grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card" data-product-card>
<a class=" grid-view-item__link {% if product.images.size > 1 and settings.enable_hover_button %} has-secondary{% endif %}" href="{{ product.url | within: collection }}" title="{{ product.title | truncate: 35 }}">
<div class="{% if settings.enable_hover_button%} tooltipp {% endif %} anim-hover ">
{% for media in product.media limit:1%}
{% case media.media_type %}
{% when 'image' %}
<img style="width:100%;height:100%;"class="grid-view-item__image lazyload animation--{{settings.lazyloading-effect}}" src="{{ 'blank.jpg' | asset_url }}" data-src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}" data-expand="-40">
{% when 'external_video' %}
{{ media | external_video_tag: class: "grid-view-item__image lazyload" }}
{% when 'video' %}
{{ media | video_tag: loop: true, autoplay: true, muted: true , class: "grid-view-item__image lazyload" }}
{% endcase %}
{% endfor %}
{% include 'product-labels' %}
{% if settings.enable_hover_button and product.available %}
<div class="product-hover-icon-container">
{%- if product.variants.size > 1 -%}
{% if template != 'index' %}
<a class="btn tooltiptext quick-view quick-view-button small--hide" data-handle="{{ product.handle }}" href="javascript:void(0);" title="select options" > {{ 'collections.general.select_option' | t }}</a>
{% endif %}
{%- else -%}
<form method="post" action="/cart/add" class="small--hide tooltip-addtocart ">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% if product.template_suffix == "preorder" %}
<input type="submit" value="{{ 'products.product.preorder' | t }}" class="btn" />
{% else %}
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}" class="btn" />
{% endif %}
</form>
{%- endif -%}
{%- endif -%}
{% if settings.enable_wishlist %}
<a href="#" data-product-handle="{{ product.handle }}" class="btn tooltiptext add-to-wishlist" title="{{ 'customer.account.my_wishlist' | t }}"><i class="fa fa-heart-o"></i></a>
{% endif %}
{% if settings.enable_hover_button and product.available %}
</div>
{% endif %}
</div>
<a href="{{ product.url | within: collection }}" title="{{ product.title }}">
<div class="h4 grid-view-item__title">
{{product.title | truncate: 35}}
</div>
<div class="grid-view-item__meta">
{% include 'product-price', variant: product, show_vendors: section.settings.show_vendor %}
</div>
</a>
</a>
</div>

• Click Save  

Let me know if you have any other requests 🙂

Katrine

Hi Katrine, 

I made the changes to the code you pasted above however now the "add to cart" on hover is removed, and when you place the mouse over the image, the text below starts jumping around.

Posted by: @adenmott

Hi Katrine, 

 

I made the changes to the code you pasted above however now the "add to cart" on hover is removed, and when you place the mouse over the image, the text below starts jumping around.

Try out this one instead Aden

<style>.tooltiptext.add-to-wishlist{top:50px!important}.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{position:relative!important;top:0!important;transform:translateX(0)!important;padding-top:8px;padding-bottom:8px}.product-hover-icon-container .add-to-wishlist{margin-left:5px}.product-card .tooltipp.anim-hover{overflow:hidden}.product-hover-icon-container{transform:translateY(50px);visibility:hidden;transition:all .4s ease}.tooltipp.anim-hover:hover .product-hover-icon-container{transform:translateY(0);visibility:visible}@media only screen and (min-width:750px){.product-hover-icon-container{position:absolute;bottom:0;left:0;display:flex;align-items:center;height:45px;width:100%;background:rgba(0,0,0,.4);justify-content:center}}@media only screen and (max-width:950px){.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{font-size:10px}}@media only screen and (max-width:800px){.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{font-size:9px}}@media only screen and (max-width:750px){.tooltipp .add-to-wishlist{display:none}}@media screen and (min-width:767px){.tooltipp{position: relative;display: inline-block;}.tooltipp .tooltiptext{visibility: none;width: auto;text-align: center;border-radius: 6px;padding: 5px;position: absolute;z-index: 1;top: 10px;}.tooltipp .tooltiptext{display:none;}.tooltipp .tooltip-addtocart{display: none;}.tooltipp:hover .tooltip-addtocart{display: inline-block;}.tooltipp:hover .tooltiptext{display:inline-block;}}.has-secondary.grid-view-item__link img.secondary{display:none;transition:1s;}.quick-view-button{transition:.3s!important}.quick-view-button:hover{transform:translateX(7px)}@media screen and (min-width:767px){.has-secondary.grid-view-item__link:hover img.grid-view-item__image{display:none;transition : 2s;}.has-secondary.grid-view-item__link img.secondary{display:none;transition : 2s;}.has-secondary.grid-view-item__link:hover img.secondary{display:block;}.has-secondary.grid-view-item__link:hover img.grid-view-item__image{display:none}}@media screen and (max-width:767px){.has-secondary.grid-view-item__link img.secondary{display:none}}@media screen and (max-width:767px){.has-secondary.grid-view-item__link p.secondary{display:none}}.anim-hover img{transition:1.4s;opacity : 1;}.anim-hover:hover img{opacity: 0.8;}.icn {position: absolute;top: 2px;width: 50px;height: 50px;border-radius: 50%;right: 28px;text-align: center;padding: 0 10px;line-height: 52px;font-size : 15px;@media only screen and (max-width: 749px) {width: 40px;height: 40px; font-size : 10px;line-height: 40px;}}.new{z-index: 2;background: {{settings.newp-bkclr}};color: {{settings.newp-clr}};}.days-ago{top: 0px;width: 45px;height: 45px;font-size: 13px;padding: 3px;border-radius: 50%;background: {{settings.newp-bkclr}};line-height: 12px;color: {{settings.newp-clr}};overflow: hidden;text-align: center;right: 0px;@media only screen and (max-width: 749px) {width:30px;height:30px;font-size : 9px;line-height: 9px;}}.sale{right: 20px;z-index: 2;background: {{settings.salep-bk}};color: {{settings.salep-txt}};}.product-card .tooltipp{width: 100%;}.product-card .tooltipp img{width: 100%;}</style>
{% unless grid_image_width %}
{%- assign grid_image_width = '275x275' -%}
{% endunless %}
<div class=" grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card" data-product-card>
<a class=" grid-view-item__link" href="{{ product.url | within: collection }}" title="{{ product.title | truncate: 35 }}">
<div class="{% if settings.enable_hover_button%} tooltipp {% endif %} anim-hover ">
{% for media in product.media limit:1%}
{% case media.media_type %}
{% when 'image' %}
<img style="width:100%;height:100%;"class="grid-view-item__image lazyload animation--{{settings.lazyloading-effect}}" src="{{ 'blank.jpg' | asset_url }}" data-src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}" data-expand="-40">
{% when 'external_video' %}
{{ media | external_video_tag: class: "grid-view-item__image lazyload" }}
{% when 'video' %}
{{ media | video_tag: loop: true, autoplay: true, muted: true , class: "grid-view-item__image lazyload" }}
{% endcase %}
{% endfor %}
{% include 'product-labels' %}
{% if settings.enable_hover_button and product.available %}
<div class="product-hover-icon-container">
{%- if product.variants.size > 1 -%}
{% if template != 'index' %}
<a class="btn tooltiptext quick-view quick-view-button small--hide" data-handle="{{ product.handle }}" href="javascript:void(0);" title="select options" > {{ 'collections.general.select_option' | t }}</a>
{% endif %}
{%- else -%}
<form method="post" action="/cart/add" class="small--hide tooltip-addtocart ">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% if product.template_suffix == "preorder" %}
<input type="submit" value="{{ 'products.product.preorder' | t }}" class="btn" />
{% else %}
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}" class="btn" />
{% endif %}
</form>
{%- endif -%}
{%- endif -%}
{% if settings.enable_wishlist %}
<a href="#" data-product-handle="{{ product.handle }}" class="btn tooltiptext add-to-wishlist" title="{{ 'customer.account.my_wishlist' | t }}"><i class="fa fa-heart-o"></i></a>
{% endif %}
{% if settings.enable_hover_button and product.available %}
</div>
{% endif %}
</div>
<a href="{{ product.url | within: collection }}" title="{{ product.title }}">
<div class="h4 grid-view-item__title">
{{product.title | truncate: 35}}
</div>
<div class="grid-view-item__meta">
{% include 'product-price', variant: product, show_vendors: section.settings.show_vendor %}
</div>
</a>
</a>
</div>

Let me know if it works now

Much better now! Thanks so much