Breadcrumbs in Pagina Prodotto
Autore: Stiac Engineering
Visite 721,
Followers 2,
Condiviso 0
Salve ragazzi,
vi propongo come idea quella d'inserire le breadcrumbs all'interno della pagina prodotto, strutturate in base alla categoria selezionata e opzioni.
Lo trovo utile per aumentare la UX da mobile e non solo, consentendo rapidamente all'utente di premere il collegamento link, per andare alla pagina di ricerca prodotti o ad esempio all'opzione selezionata / categoria per ritornare alla ricerca del prodotto.
Es.
Postato il
+1000
Come desscritto nell'altro post, se crei una nuovo file potresti fare un include di una pagina con il seguente script:
<?php
function search($start,$end,$string, $borders=true){
$reg="!".preg_quote($start)."(.*?)".preg_quote($end)."!is";
preg_match_all($reg,$string,$matches);
if($borders) return $matches[0];
else return $matches[1];
}
$usb = $_GET['product_category'];
if ($usb){
$file = file_get_contents("../cart/x5cart.js");
$arr = search('products_ordered_by_price' , 'shippings' , $file);
$arr1 = search($usb , '"category"' , $arr[0]);
$arr2 = search('text' , 'type' , $arr1[0]);
$categoria_testo = str_replace(array('text:','"',',type'),"",$arr2[0]);
$categoria_link = str_replace(' ',"-",$categoria_testo);
$categoria_link = strtolower($categoria_link);
$categoria = "<i class=\"fa font-size-8 fa-arrow-left\" aria-hidden=\"true\"></i><a class='imCssLink font-size-8' href='../$categoria_link.php' /> TORNA A $categoria_testo</a>";
echo $categoria;
}
?>
Oppure fare un load in jquery come sotto:
<script>
$(function(){
$("#im-product-container").each(function(){
$("#im-product-container").prepend($("<div class='myclass' />").load("breadcrumbs.php"));
});
});
</script>
Nella seconda ipotesi non c'è bisogno di fare la copia della pagina index
Autore
Grazie di cuore Luca!
Ho provato ma non mi esce online:
hO PROVATO SUL MIO E NEANCHE FUNZIONA
PROBABILMENTE E' UNA VECCHIA PROVA
Ok. No Problem
Questa la funzione che vedi sul mio sito
Il seguente da inserire prima dell'apertura del tag html
<?php
function search_in_cartjs($start,$end,$string, $borders=true){
$reg="!".preg_quote($start)."(.*?)".preg_quote($end)."!is";
preg_match_all($reg,$string,$matches);
if($borders) return $matches[0];
else return $matches[1];
}
function skedaCategory($categoria,$cosarestituire,$name){
$file = file_get_contents("../cart/x5cart.js");
$arr = search_in_cartjs('products_ordered_by_price' , 'shippings' , $file);
$arr1 = search_in_cartjs($categoria , '"category"' , $arr[0]);
$arr2 = search_in_cartjs('text' , 'type' , $arr1[0]);
//
$brand = str_replace(array('text:','"',',type','SUNGLASSES','OPTICAL'),"",$arr2[0]);
//
$categoria_testo = str_replace(array('text:','"',',type'),"",$arr2[0]);
$categoria_link = str_replace(' ',"-",$categoria_testo);
$categoria_link = strtolower($categoria_link);
$categoria_out = "<a class='imCssLink font-size-8' href='../index.php' />HOME</a>/ ";
//
$categoria_out .= "<a class='imCssLink font-size-8' href='../shop.php' />SHOP ONLINE</a>/";
//
$categoria_out .= "<a class='imCssLink font-size-8' href='../$categoria_link.php' /> $categoria_testo</a>";
if ($cosarestituire == "brand") { return $brand; }
if ($cosarestituire == "completo") { return $categoria_testo; }
if ($cosarestituire == "link") { return $categoria_out; }
}
$skedaCategory_link=skedaCategory($product['category'],'link',$product['name']);
$skedaCategory_link= "<div class=\"maxwidth\">$skedaCategory_link</div>";
?>
Prima della chiusura di head:
<script>
$(function(){
$("#im-product-container").each(function(){
$("#im-product-container").html("<?php echo $skedaCategory_link; ?>");
});
});
</script>
Fammi sapere.
Dimenticavo, le stringhe comprese tra le // come potrai ben capire sono una personalizzazione.
La stringa $brand mi va a sostituire le scritte SUNGLASSES ed OPTICAL con niente, quindi se ti occorre devi fare la modifica.
Questa invece: $categoria_out .= "<a class='imCssLink font-size-8' href='../shop.php' />SHOP ONLINE</a>/";
restituisce il link alla pagina shop, e potrai tranquillamente modificarla, AGGIUNGERE UN ALTRA o cancellarla in base alle tue esigenze
Autore
Ti ringrazio per il tempo dedicato. Ho provato ma non compare.
In una pagina automatica proprio è invisibile, mentre in una "manuale" compare errore.
Puoi postare una prova online?
Ti ho copiato il mio pari pari...
Autore
Certamente! Questo è il link https://www.gebher.com/product/?kessey-websitex5-pro-template
Avevo dimenticato un dettaglio
Il mio script funziona solo se la pagina del catalogo ha lo stesso nome della categoria.
Ad esempio la mia categoria si chiama KREUZBERGKINDER SUNGLASSES e lo script punta all'omonima pagina.
https://www.arteottica.net/ app/gab.php
Comunque, essendo abituato a trovare soluzioni ai problemi ho creato una funzione leggerissima, che potrebbe fare al caso tuo. L'unico problema è che bisogna creare le stringhe manualmente.
Questa la mia prova e la trovi nella pagina del mio esempio:
<?php
function bread($stocercando){
$out = "";
$narray = "eync70i1,kreuzbergkinder-sunglasses.php,KreuzBergKinder;";
$narray .= "1461hai4,charlie-max-sunglasses.php,Charlie Max;";
$narray .= "zxxhzn4o,ana-hickmann-sunglasses.php,Ana Hickmann;";
$prima_query = (explode(";",$narray));
foreach ($prima_query as $prima_query_array) {
$seconda_query = (explode(",",$prima_query_array));
if ($seconda_query[0] == $stocercando) {
$out .= '<a href="../index.php">HOME</a>';
$out .= "/";
$out .= '<a href="../shop.php">STORE</a>';
$out .= "/";
$out .= '<a href="../'.$seconda_query[1].'">'.$seconda_query[2].'</a>';
} else {
$out .= "";
}
}
return $out;
}
echo bread("1461hai4");
?>
Tu dovresti sostituire e/o aggiungere gli array $narray con
$narray = "codice categoria,link alla pagina,nome della pagina;";
Mi raccomando la punteggiatura: le virgole e i puntoEvirgola ed i punti $narray .=
per ogni array successivo al primo.
Qui invece:
$out .= '<a href="../index.php">HOME</a>';
$out .= "/";
$out .= '<a href="../shop.php">STORE</a>';
$out .= "/";
puoi sostituire inserire eliminare a tuo piacere
Alla fine sostituire
echo bread("1461hai4");
con
echo bread($product['category']);
Tutto il codice sopra va bene se incluso nella pagina product/index.php
Se invece vuoi richiamarla con jquery crea la tuapagina.php e dentro scrivi il codice seguente:
<?php
$categoria = $_GET['cat'];
function bread($stocercando){
$out = "";
$narray = "eync70i1,kreuzbergkinder-sunglasses.php,KreuzBergKinder;";
$narray .= "1461hai4,charlie-max-sunglasses.php,Charlie Max;";
$narray .= "zxxhzn4o,ana-hickmann-sunglasses.php,Ana Hickmann;";
$prima_query = (explode(";",$narray));
foreach ($prima_query as $prima_query_array) {
$seconda_query = (explode(",",$prima_query_array));
if ($seconda_query[0] == $stocercando) {
$out .= '<a href="../index.php">HOME</a>';
$out .= "/";
$out .= '<a href="../shop.php">STORE</a>';
$out .= "/";
$out .= '<a href="../'.$seconda_query[1].'">'.$seconda_query[2].'</a>';
} else {
$out .= "";
}
}
return $out;
}
echo bread($categoria);
?>
facendo le modifiche $narray e $out come prima.
Infine in index.php richiami latuapagina.php con il seguente script inserendolo prima della chiusura del body
<script>
$(window).on('load', function () {
var pcategory = '<?php echo $product['category']; ?>';
$("#im-product-container").prepend($("<div class='maxwidth' />").load("latuapagina.php?cat=" + pcategory));
});
</script>
Autore
Grazie di cuore Luca! Credo di essermi perso ma provo a metterci mano.
Non avendo definite le categorie, dovrei prima caricare i prodotti. Eventualmente poi apro un post dedicato riportando i codici se per te non è un problema.
ok