Krijg de input code niet gevonden

[Verwijderd]

Opgelost !

Het probleem is opgelost, ik keek er veel te moeilijk tegen aan naar het blijkt. We hebben de gewenst afbeeldingen in the optionele collectie beschrijving geplaatst via de HTML mode en alles werkt zoals het
moet werken.
Dank voor jullie input.
Het eindresultaat voor diegene die het willen zien. https://www.iwantproof.nl/collections/sunwear

Eelco


Mijn vraag
.Hallo allen,

Na ruim drie weken aanmodderen komt de frustratie bovendrijven. ( In het kort ) ik heb een shopify winkel met templates van een derde partij waar wij geen communicatie meer mee hebben. We hebben tot op heden redelijk alles zelf moeten doen maar nu loop ik vast. In shopify heb je de collection.liquid page waar de desbetreffende collectie in zijn geheel te zien is, in ons geval zijn dat een x tal producten per collectie. Ook heeft elke collectie een collection.image die je in het admin gedeelte toe kunt voegen. in dit admin gedeelte kun je ook een beschrijving toevoegen. In deze beschrijving heb ik een drietal images geupload met de intentie om deze afbeelding(en) als page breaks te gebruiken ( banner zoals je wil ) deze zouden om de 9 producten op de pagina moeten verschijnen dus 9 producten-Banner-9 producten-banner-enz.
Het probleem is dat ik tot op heden alleen de collection image tevoorschijn krijg.

Relevante software en hardware die ik gebruik
Shopify Edit code module / dreamweaver

Wat ik al gevonden of geprobeerd heb

De code waar het om gaat is :
<div id="LifestyleImages">
<img src="{{ collection.image | img_url: 'master' }}')" alt="">
<img src="{{ collection.image | img_url: 'master' }}')">
<img src="https://cdn.shopify.com/s/files/1/0411/6201/files/Collection_breaks_ATLAS.jpg?12084493939677778924">
</div>
En uiteraard krijg ik met deze code de collection image te zien. De files die ik wil laten zien verschillen ook nog eens per collectie, dus ik ben op zoek naar een code die de afbeeldingen in de collectie beschrijving
ook in de desbetreffende volgorde laat zien ( ik kan dus geen url voor elke image invoeren ) De files worden opgeslagen in het cdn systeem van shopify,

Het script wat ( volgens mij ) samenhangt met bovenstaande.

function initPageBreaks(){
var imgArray = $('#LifestyleImages img');
var imgLen = imgArray.length;
var ctr=0;

$('.lifestyle-extra').each(function(){
$(this).append($(imgArray[ctr]).clone())
$(this).css('background-image','url("'+$(imgArray[ctr]).attr('src')+'")')
$(this).attr('data-original',$(imgArray[ctr]).attr('src'));
if(ctr == imgLen-1)ctr=0;
else ctr++;
});

Ik vermoed dat het een tag issue is maar ik kan hem niet zien / vinden ook al zou die er tussen staan als
noob.
Ik hoop dat het e.e.a. duidelijk is wat ik probeer te vertellen.Hieronder een link naar desbetreffende pagina

https://www.iwantproof.de/collections/sunwear

Alvast dank voor jullie inzichten / ideeën

[ Voor 6% gewijzigd door Verwijderd op 23-05-2019 22:32 . Reden: Opgelost ]

[TERW_DAN]

Als ik het goed begrijp probeer je dus twee types images in eenzelfde array te zetten. Je collectie, en images die gebruikt worden als banner.

Als je dat wilt doen zou ik toch echt die banners uit een aparte array plukken en ze laten zien. Je code kan niet ruiken wat voor plaatje je hebt, dus het is veel logischer om die dingen dan ieder uit hun eigen array te halen. Dan kun je gewoon tellen. 9 plaatjes uit de collection array, dan weer 1 uit de banner array en weer verder.

Hoe ziet je database eruit waar je die dingen uithaalt?

[robertpNL]

code:

$('.lifestyle-extra').each(function(){

Moet zijn:

code:

$('#lifestyle-extra').each(function(){

Want dat element heeft een id met dat naam.

En je if is niet helder opgemaakt:

code:

if(ctr === imgLen-1) { ctr=0; }
else { ctr++; }

[ Voor 24% gewijzigd door robertpNL op 28-04-2019 09:34 ]

[Verwijderd]

TERW_DAN schreef op zondag 28 april 2019 @ 09:29:
Als ik het goed begrijp probeer je dus twee types images in eenzelfde array te zetten. Je collectie, en images die gebruikt worden als banner.

Als je dat wilt doen zou ik toch echt die banners uit een aparte array plukken en ze laten zien. Je code kan niet ruiken wat voor plaatje je hebt, dus het is veel logischer om die dingen dan ieder uit hun eigen array te halen. Dan kun je gewoon tellen. 9 plaatjes uit de collection array, dan weer 1 uit de banner array en weer verder.

Hoe ziet je database eruit waar je die dingen uithaalt?

Dank voor je input,

Ik denk dat de img array uitsluitend voor de Lifestyle Images is, gezien het feit dat de collection image als aparte image geupload wordt, de Image files staan in de CDN van shopify waar alle files opgeslagen worden als je iets upload ( of het nou een PDF of Image of PNG is ) de website afbeeldingen zoals buttons en andere images staan in de Asset folder.

Dus je hebt de Collection image ( die dient als banner bovenaan de pagina ) die staat los van de collection description. ( dient ook apart toegewezen te worden in de admin omgeving )

En je hebt de collection description waar je de beschrijving invoert, en daar heb ik de drie images aan toegevoegd om na 9 producten een banner te vormen.

En nu heb ik net de volgende actie gedaan :

{% comment %} <div id="MainImgHeader" class="collection-image" style="background-image:url('{{ collection.image | img_url: 'master' }}')">
<img src="{{ collection.image | img_url: 'master' }}"> {% endcomment %}
en dan worden de images uit de description wel getoond ( maar dan wel met de verkeerde opmaak )

[ Voor 11% gewijzigd door Verwijderd op 28-04-2019 12:04 ]

[Verwijderd]

robertpNL schreef op zondag 28 april 2019 @ 09:32:

code:

$('.lifestyle-extra').each(function(){

Moet zijn:

code:

$('#lifestyle-extra').each(function(){

Want dat element heeft een id met dat naam.

En je if is niet helder opgemaakt:

code:

if(ctr === imgLen-1) { ctr=0; }
else { ctr++; }

Aangepast, maar dan krijg ik helemaal geen afbeeldingen ( buiten de collection image ) te zien. Dank voor het alternatief