إعداد قالب مخصص في Upcart

<h2>Shopping Cart ({props.cartQuantity})</h2>

<button  
  onClick={props.closeHandler}  
  aria-label="Close cart"  
>×</button>

<div>{props.titleComponent}</div>

<div dangerouslySetInnerHTML={{ __html: props.announcementTemplate }} />

<div>Time remaining: {props.timer}</div>

<div>  
  {props.shouldUseTimer && (  
    <span>{props.timer}</span>   
  )}  
</div>

<div>  
  {!props.isTimerExpiredAndShouldHide && (  
    <div>{props.timer}</div>  
  )}  
</div>

<div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />

<div>  
  {Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete  
</div>

<div>
  {props.rules.map((rule) => (
    <div key={rule.id}>
      <h3>{rule.title}</h3>
      <p>{rule.conditionsMet ? "Reward unlocked!" : rule.description}</p>
    </div>
  ))}
</div>

<div>  
  {props.showSection && (  
    <div>  
      <h2>Available Rewards...</h2>  
    </div>  
  )}  
</div>

<button type="button" onClick={props.onToggleSection}>  
  {props.showSection ? "Hide Rewards" : "Show Available Rewards"}  
</button>

<a href={props.itemUrl} className="product-link">  
  <img src={props.imageUrl} alt={props.altText} />  
</a>

<img   
  src={props.imageUrl}   
  alt={props.altText}  
  className="product-image"  
/>

<div>  
  <h3>{props.productTitle}</h3>  
</div>

<button   
  onClick={() => props.onAddClick(props.productId, props.selectedVariantId)}  
  disabled={props.addLoading}  
>  
  {props.addLoading ? 'Adding...' : props.addButtonText}  
</button>

<textarea  
  value={props.cartNote}  
  ...  
/>

<textarea  
  placeholder={props.notesPlaceholder}  
  ...  
/>

<h3 className="notes-title" dangerouslySetInnerHTML={{ __html: props.notesTitle }} />

<input  
  type="text"  
  value={props.discountCodeInput}  
  onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
  ...  
/>

<form onSubmit={props.handleSubmit} >  
  <div className="input-group">  
    <input  
      type="text"  
      value={props.discountCodeInput}  
      onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
      placeholder={props.discountCodePlaceholder}  
    />   
    <button   
      type="submit"  
      disabled={props.indicator === 'validating' || !props.discountCodeInput.trim()}  
    >  
      {props.discountCodeButtonText}  
    </button>  
  </div>  
</form>