Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Hi,
Just to give a simple tip regarding Cart, when you have a fairly large amount of information to write in the product description.
I found this simple solution which consists in creating collapsible content, because on certain browser, like on my iPad, the Cart window was not scrollable.
Here for example, html code to write in the description of your products then the corresponding CSS, no need for javascript.
HTML product description (in 2 languages but you can do what you want):
<div data-lang="fr" >
<p>
<span style="color: #808080; font-family: helvetica; font-size: small;">DESCRPTION FR</span>
</p>
</div>
<br />
<br />
<section data-lang="fr" class="accordionlic">
<input type="checkbox" name="collapse" id="handle1" >
<h2 class="handle">
<label for="handle1">Plus d'infos</label>
</h2>
<div class="contentlic">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt arcu ut nunc congue, vitae sagittis quam ultrices. Suspendisse quis ultricies sem. Aenean imperdiet venenatis urna, in convallis dui iaculis ullamcorper. Praesent rhoncus aliquet augue. Suspendisse eu orci ac tortor aliquam accumsan eu ut neque. Duis lacinia tortor eget sem posuere, quis volutpat sapien posuere. Etiam erat augue, consequat nec lorem id, tempor tempor urna. Etiam non vulputate arcu. Fusce molestie accumsan dictum.</p>
</div>
</section>
<div data-lang="en" >
<p>
<span style="color: #808080; font-family: helvetica; font-size: small;">DESCRIPTION EN</span>
</p>
</div>
<br />
<br />
<section data-lang="en" class="accordionlic">
<input type="checkbox" name="collapse" id="handle2" >
<h2 class="handle">
<label for="handle2">More informations</label>
</h2>
<div class="contentlic">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt arcu ut nunc congue, vitae sagittis quam ultrices. Suspendisse quis ultricies sem. Aenean imperdiet venenatis urna, in convallis dui iaculis ullamcorper. Praesent rhoncus aliquet augue. Suspendisse eu orci ac tortor aliquam accumsan eu ut neque. Duis lacinia tortor eget sem posuere, quis volutpat sapien posuere. Etiam erat augue, consequat nec lorem id, tempor tempor urna. Etiam non vulputate arcu. Fusce molestie accumsan dictum.</p>
</div>
</section>All you have to do is to replace "DESCRPTION FR" and "DESCRPTION EN" and the Lorem text.
Don't forget named id with different number for each different product:
id="handle1" and label for="handle1"
id="handle2" and label for="handle2"
id="handle3" and label for="handle3"
....etc...
An the corresponding css:
/* Toggle product description >>
=================================================== */
/*
CSS for the main interaction
*/
.accordionlic > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordionlic .contentlic {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordionlic > input[type="checkbox"]:checked ~ .contentlic {
height: auto;
overflow: visible;
}
.accordionlic label {
display: block;
}
/*
Styling
*/
.accordionlic {
margin-bottom: 1em;
}
.accordionlic > input[type="checkbox"]:checked ~ .contentlic {
padding: 5px;
border: 1px solid #e8e8e8;
border-top: 0;
}
.accordionlic .handle {
margin: 0;
font-size: 1.125em;
line-height: 1.2em;
}
.accordionlic label {
color: #333;
cursor: pointer;
font-weight: normal;
padding: 5px;
background: #e8e8e8;
}
.accordionlic label:hover,
.accordionlic label:focus {
background: #d8d8d8;
}
.accordionlic .handle label:before {
font : normal normal 14px/1 Font Awesome\ 5 Pro;
content: "\f054";
display: inline-block;
margin-right: 10px;
font-size: .58em;
line-height: 1.556em;
vertical-align: middle;
}
.accordionlic > input[type="checkbox"]:checked ~ .handle label:before {
content: "\f078";
}That's all!
You can view it on my live website:
https://phototheque.nicolaslogerot.com/
Last edited by Nico3939 (2020-06-09 01:56:12)
Offline
The cart modal should be scrollable. Do you have any live examples showing this as a problem?
Offline
Yes Matt, on my website and my iPad (I think it’s 11 inch model), last version OS installed, the Cart modal windows dosen’t scroll.
But on my iPhone 7 no problem
Last edited by Nico3939 (2020-06-09 02:14:40)
Offline
Which modals? The add-to-cart for each image, or something else? What generation iPad and which OS version are you using? From what I'm seeing so far, I'm able to scroll the add-to-cart modal on my iPad Pro, running latest OS.
Offline
Yes, the add to cart for each image.
On iPad Pro 9,7 inch, OS v 13.3.1
A link to a little video of the problem (was the same before I made the collapsible content):
https://youtu.be/uS2pHO2aeiE
Offline
I'm confused. Was the problem present before you added that custom, collapsible bit?
Offline
Yes, for this reason I put collaspsible content
Offline
Yes, for this reason I put collaspsible content
It might be helpful if you showed the behavior without the collapsable text.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline