Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Shop Products Tag View

Featured Lock Resolved Issue
Hello,

I will be working with tags and not with categories in the shop, but selecting J2Store » Products Tag View and applying the same settings as J2Store » Products List View, the page is not formatted as the latter.

For example, in the Products View (all products shown) the add to cart button floats ap and down when hovering. In the product details page, Decription tab appears under the product image and not under the add to cart button. It seems that the template is not styled for tags view at all.

Please, advise, thank you

8 Answers

manton

More than a month ago #Permalink
Hello? Is this the wrong place for posting paid plan support?

Rashida Rahman - Staff

4 weeks ago #Permalink
Hi manton,
Thanks for your query.
Tags should work too in this case.
Would you please share your site url here, that would be better to understand your issue.

Best Regards

manton

4 weeks ago #Permalink
Hello,

This is a menu with Products List View
https://www.porixis.gr/minsel
and its respective products detail page
https://www.porixis.gr/minsel/kinitiras-minsel-m165-me-karm-ter-amal

Good up to here.

Now, the following are:

1. A menu with Products Tag View
https://www.porixis.gr/antallaktika/pistonia
Issues: It doesn't have the same styling as the porducts list view, pls check attachment 1.png

2. The product listing after clicking through the Products Tag View
https://www.porixis.gr/antallaktika/pistonia/pistoni-gnisio-minsel-165-f61-00-mm
Some fields are in the wrong position and some other missing completely. Please check attachment 2.png

It looks like the above views are not styled at all within the template, like the shop was styled only to work with products list view. I need to work with tags, so I would like to know wether I can use this template or not.

Thank you in advance

Attachments (2)

  • 1.png
    1.png 287.7 KB
  • 2.png
    2.png 423.7 KB

Rashida Rahman - Staff

3 weeks ago #Permalink
Hi,
Sorry for the late response.
Please follow the following instructions to get the tag view.
1) Please goto this file location /templates/indigo/js/main.js
2) Then replace the attached main.js file there.
3) Then add the following css into your custom css

#j2store-pf-filter-color_2, #j2store-pf-filter-size {
margin-top: 25px;
}
#j2store-pf-filter-color_2 .j2store-productfilter-label, #j2store-pf-filter-size .j2store-productfilter-label {
display: block;
color: #6c6d8b;
margin-bottom: 20px;
}
#j2store-pf-filter-color_2 .j2store-productfilter-label:hover, #j2store-pf-filter-size .j2store-productfilter-label:hover {
color: #02c0d0;
cursor: pointer;
}
#j2store-pf-filter-color_2 .j2store-productfilter-label input, #j2store-pf-filter-size .j2store-productfilter-label input {
display: none;
}
#j2store-brand-filter-container .j2store-product-brand-label {
display: block;
color: #6c6d8b;
margin-bottom: 20px;
}
#j2store-brand-filter-container .j2store-product-brand-label:hover {
color: #02c0d0;
cursor: pointer;
}
#j2store-brand-filter-container .j2store-product-brand-label input {
display: none;
}
/* size */
#j2store-pf-filter-color_2, #j2store-pf-filter-size_1 {
margin-top: 25px;
}
#j2store-pf-filter-color_2 .j2store-productfilter-label, #j2store-pf-filter-size_1 .j2store-productfilter-label {
display: block;
color: #6c6d8b;
margin-bottom: 20px;
}
#j2store-pf-filter-color_2 .j2store-productfilter-label:hover, #j2store-pf-filter-size_1 .j2store-productfilter-label:hover {
color: #02c0d0;
cursor: pointer;
}
#j2store-pf-filter-color_2 .j2store-productfilter-label input, #j2store-pf-filter-size_1 .j2store-productfilter-label input {
display: none;
}
.product-filter-group h4.product-filter-heading {
margin-top: 65px;
margin-bottom: 25px;
}
#j2store-pf-filter-size_1 {
margin-top: 0;
}
#j2store-pf-filter-size_1 label {
display: inline-block !important;
border: solid 1px #f1f1f1;
padding: 5px 15px;
margin-right: 10px;
font-weight: 700;
}
#j2store-pf-filter-size_1 label:hover {
background-image: linear-gradient(286deg, #00d3a7, #02c0d0);
color: #fff !important;
cursor: pointer;
}

.j2store-products-row .j2store-single-product .j2store-addtocart-form {
background-image:none !important;
bottom:100px !important;

}

.j2store-products-row .j2store-single-product .j2store-addtocart-form .j2store-add-to-cart .btn-primary {
color: transparent !important;
}
.j2store-products-row .j2store-single-product .j2store-addtocart-form::after {
content:none;
}

.j2store-products-row .j2store-single-product:hover .j2store-addtocart-form {
background-image: linear-gradient(286deg, #00d3a7, #02c0d0) !important;
position: absolute;
bottom:100px !important;
}

.j2store-products-row .j2store-single-product:hover .j2store-addtocart-form .j2store-add-to-cart .btn-primary {
color: #fff !important;
}
.j2store-products-row .j2store-single-product:hover .j2store-addtocart-form::after {
content:"";
}

Here is a screencast of this workaround for you in case you need it:
https://www.youtube.com/watch?v=lu1zb-hcBAc&feature=youtu.be

Note: We’ll fix this in the next update.

-Best Regards

Attachments (1)

  • main.zip 3.6 KB

manton

3 weeks ago #Permalink
Hello,

I replaced the main.js file and created a custom.css for the css.
On the Products Tag View only the buy now button is fixed. ***edit*** no, its not fixed

Usnolved:
1. The "from to" text. I see it working on your video, but it's not correct on my site. (Note that the custom.css only contains your code, I have made no changes at all.)
2. From the video I understand that the fix you provided is only for the Products Tag View. But the issues are in the product details page as well if you click a product from that view. (as in my previous attached screenshot 2.png)

Please, let me know if you need access to my backend.

https://www.porixis.gr/antallaktika/pistonia
https://www.porixis.gr/antallaktika/pistonia/pistoni-gnisio-minsel-165-f61-00-mm

Rashida Rahman - Staff

3 weeks ago #Permalink
Hi,
Sorry for the inconvenience!
Please give me your super user access via PM, if possible.

Note: Please click on my avatar and find the send message button to PM me.

Regards

manton

3 weeks ago #Permalink
just send you the pm
the css is added on the template css field as you did on the video

Rashida Rahman - Staff

3 weeks ago #Permalink
just send you the pm
the css is added on the template css field as you did on the video


Ok I will look into it as soon as possible.
Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 107
Toufiq

Toufiq

Total Accepted Answers: 61
Sifat

Sifat

Total Accepted Answers: 45
Ofi Khan

Ofi Khan

Total Accepted Answers: 18
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 18

118

Templates

306022

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us