Het is mogelijk om vanuit de website informatie op te vragen van de EV webshop. Je kunt daarbij denken aan reclames in een bepaalde periode, assortimenten etc. Hierdoor kun je deze informatie binnen een website gebruiken om bijvoorbeeld dynamisch een menu op te bouwen op basis van de beschikbare assortimenten voor een bepaalde datum.
Een voorbeeld kun je vinden via deze website.
Een uitleg kun je vinden bij de Webshop Tools op de EXTRAvestiging website.
Om dit in te stellen is kennis nodig van programmeren en .css. en dient door uw webshopprogrammeur uitgevoerd te worden.
1. XML-bestand ophalen van je webshop
Ga naar de function.php van de website en voeg de basis code toe om een XML bestand te kunnen ophalen.
Deze code hoeft maar 1x in de function.php te staan.
/*ZET ONDERSTAANDE CODE IN DE FUNCTION.PHP*/ /*BASIS Webshop gegevens inlezen en tonen*/ function fetch_xml_data($url) { // Gebruik wp_remote_get om de XML-gegevens op te halen $response = wp_remote_get($url); // Controleer of de reactie een fout bevat if (is_wp_error($response)) { return false; } // Controleer de statuscode van de reactie $response_code = wp_remote_retrieve_response_code($response); if ($response_code != 200) { return false; } // Haal het lichaam van de reactie op $body = wp_remote_retrieve_body($response); // Parse de XML-gegevens $xml = simplexml_load_string($body); // Controleer of de XML-gegevens correct zijn geparsed if ($xml === false) { return false; } // Voeg deze regel toe om de XML-gegevens te bekijken // var_dump($xml); return $xml; }
2. XML-bestand parsen
Met parsen wordt bedoeld dat het XML-bestand wordt omgezet naar bruikbare informatie voor de website.
Let op! Je dient hier naar de juiste webshop te verwijzen.
VOORBEELD 1: Assortimenten opvragen op de website: zet onderstaande code in de function.php
Bij count kun je aangeven hoeveel records je wilt tonen.
/*OPVRAGEN ASSORTIMENTEN WEBSHOP*/ function display_xml_data() { // De URL van waar de XML-gegevens worden opgehaald $url = 'https://evJOUWWEBSHOPb2c.extravestiging.nl/GetInfo.aspx?Action=GetMainAssortiments'; // Basis-URL voor de website $base_url = 'https://evJOUWWEBSHOPb2c.extravestiging.nl/'; // Haal de XML-gegevens op $xml = fetch_xml_data($url); // Controleer of de gegevens succesvol zijn opgehaald if (!$xml) { return 'Er zijn geen gegevens gevonden.'; } // Bouw de HTML-uitvoer op $output = '<div class="xml-data">'; // Teller voor het aantal weergegeven items $count = 0; $max_items = 6; foreach ($xml->Assortiment as $item) { if ((string) $item['ShowOnWebsite'] === 'True') { $output .= '<div class="assortiment-item">'; $output .= '<a href="' . $base_url . 'assortiment/' . sanitize_title((string) $item['Name']) . '" target="_blank">'; if (!empty($item['Image'])) { $image_url = $base_url . esc_url((string) $item['Image']); $output .= '<img src="' . $image_url . '" alt="' . esc_attr((string) $item['Name']) . '">'; } $output .= '<h2>' . esc_html((string) $item['Name']) . '</h2>'; $output .= '</a>'; $output .= '</div>'; // Verhoog de teller $count++; // Controleer of het maximale aantal items is bereikt if ($count >= $max_items) { break; } } } $output .= '</div>'; return $output; } add_shortcode('xml_data', 'display_xml_data'); function xml_data_shortcode() { return display_xml_data(); } add_shortcode('xml_data', 'xml_data_shortcode');
VOORBEELD 2: Aanbiedingen opvragen op de website: zet onderstaande code in de function.php
Bij count kun je aangeven hoeveel records je wilt tonen.
/*Webshop AANBIEDINGEN inlezen en tonen*/ function display_discount_products() { // De URL van waar de XML-gegevens worden opgehaald $url = 'https://evJOUWWEBSHOPb2c.extravestiging.nl/GetInfo.aspx?Action=GetDiscountProducts'; // Basis-URL voor de website $base_url = 'https://evJOUWWEBSHOPb2c.extravestiging.nl'; // Haal de XML-gegevens op $xml = fetch_xml_data($url); // Controleer of de gegevens succesvol zijn opgehaald if (!$xml) { return 'Er zijn geen aanbiedingen gevonden.'; } // Bouw de HTML-uitvoer op $output = '<div class="discount-products">'; // Teller voor het aantal weergegeven aanbiedingen // $count = 0; // $max_items = 3; foreach ($xml->DiscountItem as $item) { $output .= '<div class="discount-product">'; $output .= '<a href="' . $base_url . (string) $item['URL'] . '" target="_blank">'; if (!empty($item['Image'])) { $image_url = $base_url . esc_url((string) $item['Image']); $output .= '<img src="' . $image_url . '" alt="' . esc_attr((string) $item['Name']) . '">'; } $output .= '<h2>' . esc_html((string) $item['Name']) . '</h2>'; $output .= '</a>'; $output .= '<p>Korting geldig van ' . esc_html(date('d-m-Y', strtotime((string) $item->attributes()->DiscountStartDate))) . ' tot ' . esc_html(date('d-m-Y', strtotime((string) $item->attributes()->DiscountEndDate))) . '</p>'; $output .= '<p>Normale prijs: €' . esc_html((string) $item->attributes()->DisplayPrice) . '</p>'; $output .= '<p>Korting prijs: €' . esc_html((string) $item->attributes()->DiscountPrice) . '</p>'; $output .= '</div>'; } $output .= '</div>'; return $output; } add_shortcode('discount_products', 'display_discount_products');
3. Stylen via .css
Via css kun je de gegevens opmaken.
VOORBEELD 1: Assortimenten
/*Tonen assortiment webshop op website*/ .xml-data { display: flex; flex-wrap: wrap; -ms-flex: 0 0 33.333333%; margin-right: -7.5px; margin-left: -7.5px; } .assortiment-item { position: relative; width: 100%; margin-right: 4px; margin-left: 4px; -ms-flex: 0 0 33.333333%; flex: -1 0 32.333333%; max-width: 32.333333%; height: 100%; margin-bottom: 10px; border: 1px solid #333333; } .assortiment-item img { max-width: 100%; height: auto; } .assortiment-item a { text-decoration: none; color: inherit; } .assortiment-item h2 { font-size:25px; text-align:center; } .assortiment-item hover { }
VOORBEELD 2: Aanbiedingen
/* Algemene styling voor de container */ .discount-products { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 20px 0; } .discount-product { border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); margin: 10px; max-width: 300px; padding: 15px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; width: 100%; } .discount-product:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); transform: translateY(-5px); } /* Styling voor de afbeeldingen */ .discount-product img { border-bottom: 1px solid #ddd; border-radius: 5px 5px 0 0; max-width: 100%; height: auto; } /* Styling voor de titels */ .discount-product h2 { color: #333; font-size: 1.5em; margin: 15px 0 10px; text-decoration: none; transition: color 0.2s; } .discount-product a { color: inherit; text-decoration: none; } .discount-product a:hover h2 { color: #0073aa; } /* Styling voor de datums */ .discount-product p { color: #666; font-size: 0.9em; margin: 10px 0 0; }