אייקון עגלה דינאמי ב-WooCommerce

WooCommerce הינו תוסף ה-e-Commerce הכי פופלארי היום להקמת חנויות מבוססות WordPress. במדריך הבא, נלמד איך לעדכן בצורה דיאנמית את אייקון העגלה מבלי לרענן את הדף.

שלב 1 – בניית אייקון עגלה

השלב הראשון הוא לבנות את אייקון העגלה ולעצב אותו ב-CSS, במידה ויש לכם כבר אייקון עגלה בתבנית, קפצו לשלב מספר 4.

<div class="cart-icon">
  <img src="https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_shopping_cart_white_24px.svg" alt="Cart Icon">
  <span class="badge">0</span>
</div>

.cart-icon {
  position: relative;
}

.cart-icon img {
  width: 40px;
  height: auto;
}

.cart-icon .badge {
  display: block;
  width: 18px;
  height: 18px;
  background-color: black;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 14px;
  position: absolute;
  top: -3px;
  right: -3px;
}

שלב 2 – הוספת האייקון לתבנית

בשלב הבא, אנחנו נוסיף את האייקון שלנו לתבנית האתר שלנו, נתחיל ביצירת קובץ בשם cart-icon.php תחת התיקייה הראשית של התבנית שלכם, ונשים בו את התוכן הבא:

<?php
/**
 * WooCommerce Cart Icon
 *
 * @since 1.0.0
 */
global $woocommerce; ?>

<div class="cart-icon">
  <a href="<?php echo wc_get_cart_url(); ?>">
    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/ic_shopping_cart_white_24px.svg" alt="<?php esc_attr_e( 'Cart Icon' ); ?>">

    <?php if ( 0 < $woocommerce->cart->cart_contents_count ) : ?>
      <span class="badge"><?php echo esc_html( $woocommerce->cart->cart_contents_count ); ?></span>
    <?php endif; ?>
  </a>
</div>

בקטע הקוד הנ״ל אנחנו בעצם מוסיף דינאמיות לאייקון שלנו, כלומר, כאשר העמוד יטען, אייקון העגלה יוצג ובמידה ויש מוצרים בעגלה (שורה 13), אנחנו נציג את מספר המוצרים בעגלה. בנוסף אנחנו מוסיפים את הקישור לעגלה ככה שאם ילחצו על האייקון נעבור לעגלה (שורה 10).

שימו לב: יש להוריד את אייקון העגלה ולשמור אותו בנתיב assets/images/ תחת התיקייה הראשית של התבנית. בנוסף, יש להעתיק את קוד ה-CSS לקובץ style.css של התבנית.

שלב 3 – הצגת אייקון העגלה בתבנית

בשלב זה נחליט איפה אנחנו רוצים בעצם שאייקון העגלה שלנו יוצג (לרוב בשורת התפריט), ונציג אותו ע״י הוספת הקוד הבא לקובץ הרצוי בתבנית שלנו:

<?php get_template_part( 'cart', 'icon' ); ?>

שורת הקוד הנ״ל מבצעת קריאה והדפסה של תוכן הקובץ אותו יצרנו cart-icon.php.

שלב 4 – עדכון האייקון ב-AJAX

השלב הבא הוא שלב קליל, אנחנו נתלבש על ה-filter של WooCommerce אשר אחראי לבצע עדכונים ב-Front End של האתר כאשר מוצר נוסף לעגלה, נעתיק את הקוד הבא לקובץ functions.php:

/**
 * Update WooCommerce cart icon using AJAX.
 *
 * @since 1.0.0
 */
add_filter( 'add_to_cart_fragments', 'dorzki_woocommerce_update_cart_icon' );

function dorzki_woocommerce_update_cart_icon( $fragments ) {

  ob_start();

  get_template_part( 'cart', 'icon' );

  $fragments[ 'div.cart-icon' ] = ob_get_clean();

  return $fragments;
  
}

אוקיי, לא להיבהל, מה שקורה זה בעצם אנחנו קוראים שוב לקובץ של האייקון cart-icon.php אשר יצרנו בשלבים הקודמים, ולוקחים את ה-HTML שנוצר בו ומכניסים אותו למערך $fragments. המפתח של הערך אליו אנחנו מכניסים הוא בעצם ה-selector של האייקון בתבנית.

למי שפחות חזק ב-CSS וב-JavaScript, המושג Selector בעצם מתייחס לאפשרות שלנו לטרגט אלמנט מסויים בדף HTML שלנו ע״י מאפיין מסויים או על ידי כמה מאפיינים (ID, Class, Tag וכד׳), לקריאה מורחבת יותר אודות Selector-ים ניתן לעיין במאמר בקישור הבא.

סיכום

זהו, כל שנשאר לעשות זה פשוט להיכנס לחנות שלנו, להוסיף מוצר ולראות את הקסם קורה! עדכון האייקון הוא לא משהו קריטי, אבל בהחלט מוסיף עניין ומקל על הגולשים שלכם לדעת כמה מוצרים יש להם בחנות מבלי להיכנס.